<template>
    <h2>
        K线图数据
    </h2>
    <div id="showKChart">

    </div>
</template>

<script setup lang="ts">
import { AxiosResponse } from 'axios';
import { onMounted, inject, reactive } from 'vue';
import service from '../../../utils/service';
let echarts: any = inject("echarts")
let option: any
option = reactive({
    // 标题
    title: {
        text: '销量数据图'
    },
    // 指针悬停提示
    tooltip: {
        trigger: 'axis'
    },
    // 说明
    legend: {
        data: ['帽子销量', '运动装销量', '袜子销量', '西装销售']
    },
    // 网格
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    // 生成图片工具
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // x轴
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    // y轴
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '帽子销量',
            type: 'line',
            // 当前数据总和
            // stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '运动装销量',
            type: 'line',
            // stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '袜子销量',
            type: 'line',
            // stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '西装销售',
            type: 'line',
            // stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
    ]
})
const getChartData = () => {
    service({
        url: `/data/kData`,
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            option.xAxis.data = res.data.data.x
            option.series[0].data = res.data.data.val[0]
            option.series[1].data = res.data.data.val[1]
            option.series[2].data = res.data.data.val[2]
            option.series[3].data = res.data.data.val[3]
        }
    }).then(() => {
        showKChart()
    })
}
const showKChart = () => {
    let echartsDOM = document.getElementById("showKChart")
    let showChart = echarts.init(echartsDOM as HTMLElement)
    showChart.setOption(option)

}
onMounted(() => {
    getChartData()
})
</script>

<style scoped>
#showKChart {
    margin-top: 10px;
    height: 400px;
}
</style>